<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼎搜网登录页面</title>
    <link rel="stylesheet" href="/css/">
</head>

<body>
    <style type=text/css>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        a {
            text-decoration: none;
            color: black;
        }
        
        .box {
            width: 1000px;
            /* height: 1200px; */
            margin: 0 auto;
        }
        /* 最顶部的蓝色 */
        
        .top {
            width: 1000px;
            height: 24px;
            background-color: skyblue;
            float: left;
        }
        /* 网页 首页头部 */
        
        .heard {
            width: 1000px;
            height: 118px;
        }
        /* 鼎搜网图标 */
        
        .heard-img {
            width: 200px;
            height: 118px;
            float: left;
        }
        
        .heard-img img {
            width: 121px;
            height: 63px;
            margin-top: 50px;
            margin-left: 60px;
        }
        /* 鼎搜网 头部 标题 */
        
        .heard-title {
            width: 800px;
            height: 118px;
            float: right;
        }
        
        .heard-title-content {
            height: 15px;
            margin-top: 77px;
            margin-left: 50px;
        }
        
        .heard-title-content ul li {
            display: inline-block;
            margin-right: 18px;
            color: #000000;
            font-size: 14px;
        }
        
        .heard-title-content ul li input {
            width: 216px;
            height: 30px;
            background-image: url(./fdj.png);
            background-repeat: no-repeat;
            background-position: 188px 6px;
        }
        /* 第一张大图 */
        
        .big-img {
            width: 1000px;
            height: 400px;
            overflow: hidden;
        }
        
        .big-img img {
            width: 1000px;
            height: 400px;
        }
        
        .wyzr {
            width: 1000px;
            height: 50px;
            margin: 0 auto;
            margin-top: 50px;
            text-align: center;
            position: relative;
        }
        
        .zr p:first-child {
            letter-spacing: 9px;
            font-size: 16px;
            color: #010101;
        }
        
        .zr p:last-child {
            font-size: 12px;
            letter-spacing: -1px;
            color: #3d3d3d;
        }
        
        .zr::after,
        .zr::before {
            content: '';
            position: absolute;
            top: 40%;
            background-color: skyblue;
            height: 1px;
            width: 105px;
        }
        
        .zr::after {
            left: 315px;
        }
        
        .zr::before {
            right: 315px;
        }
        
        .login-interface {
            width: 750px;
            height: 260px;
            margin: 0 auto;
            margin-top: 75px;
            display: flex;
        }
        
        .input-content {
            width: 370px;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }
        
        .big-click {
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        
        .click {
            display: flex;
        }
        
        .click div:first-child {
            width: 57px;
            height: 15px;
            font-size: 12px;
            line-height: 15px;
            text-align: center;
            background-color: #b3d9ff;
            border-radius: 3px;
            margin-right: 5px;
        }
        
        .click div:last-child {
            width: 57px;
            height: 15px;
            font-size: 12px;
            line-height: 15px;
            text-align: center;
            background-color: #eeeeee;
            border-radius: 3px;
        }
        
        .uese-name {
            display: flex;
            justify-content: center;
            font-size: 12px;
        }
        
        .uese-name p input {
            width: 265px;
            height: 20px;
            border: 1px solid #d0cfcf;
            background-color: #ecf5ff;
        }
        
        .uese-password {
            display: flex;
            justify-content: center;
            font-size: 12px;
        }
        
        .uese-password p input {
            width: 265px;
            height: 20px;
            border: 1px solid #d0cfcf;
            background-color: #ecf5ff;
            margin-left: 12px;
        }
        
        .uese-code {
            /* width: 315px; */
            display: flex;
            font-size: 12px;
        }
        
        .uese-code input {
            width: 97px;
            height: 20px;
            border: 1px solid #d0cfcf;
            background-color: #ecf5ff;
        }
        
        .yzm {
            width: 72px;
            height: 22px;
        }
        
        .yzm img {
            width: 100%;
            height: 100%;
        }
        
        .codea::after {
            content: '点击更换';
            color: red;
            font-size: 12px;
        }
        
        .term-of-validity {
            display: flex;
            width: 315px;
            font-size: 12px;
        }
        
        .term-of-validity input {
            zoom: 0.8;
            margin: 4px 8px 0px 5px;
        }
        
        .register {
            display: flex;
        }
        
        .register-content {
            width: 93px;
            height: 23px;
            background-color: #b3d9ff;
        }
        
        .register-content p {
            color: white;
            font-size: 14px;
            text-align: center;
            line-height: 23px;
        }
        
        .register-second {
            color: red;
            font-size: 12px;
            line-height: 23px;
            margin-left: 10px;
        }
        
        .picture-puzzle {
            width: 380px;
            height: 100%;
        }
        
        .picture-puzzle img {
            width: 100%;
            height: 100%;
        }
        
        .bottom {
            width: 1000px;
            height: 167px;
            margin: 0 auto;
            /* background-color: chartreuse; */
            display: flex;
        }
        
        .daohang {
            margin: 0 auto;
            width: 650px;
            height: 167px;
            /* background-color: yellow; */
            display: flex;
            justify-content: space-around;
            /* background-color: blue; */
        }
        
        .daohang-img {
            width: 350px;
            height: 167px;
        }
        
        .daohang-img img {
            width: 100%;
            height: 100%;
        }
        
        .daohang ul li:first-child {
            font-size: 16px;
            color: #000000;
            margin: 44px 0 26px 0;
            font-weight: bold;
        }
        
        .daohang ul li:nth-child(2),
        .daohang ul li:nth-child(3),
        .daohang ul li:nth-child(4) {
            font-size: 12px;
            line-height: 25px;
            letter-spacing: 2px;
            line-height: 25px;
            letter-spacing: 2px;
        }
        
        .bottom2 {
            height: 70px;
            width: 1000px;
            background-color: #6db6ff;
            position: relative;
            margin: 0 auto;
            margin-top: 20px;
        }
        
        .bottom2 p {
            position: absolute;
            top: 42px;
            left: 350px;
            font-size: 12px;
        }
        
        .xian {
            height: 1px;
            width: 1000px;
            background-color: #6db6ff;
            margin: 0 auto;
            margin-top: 50px;
        }
    </style>
    <div class="box">
        <!-- 顶部盒子 -->
        <div class="top"></div>
        <!-- 网页头部 -->
        <div class="heard">
            <div class="heard-img">
                <img src="./sdw.png" alt="">
            </div>
            <div class="heard-title">
                <div class="heard-title-content">
                    <ul>
                        <li><a href="./index.html">首页</a></li>
                        <li><a href="./zc.html">关于鼎搜</a></li>
                        <li><a a style="color: red; " href="./denglu.html">鼎搜服务</a></li>
                        <li><a href="./liebiao.html">鼎搜动态</a></li>
                        <li><a href="./xiangxi.html">鼎搜诚聘</a></li>
                        <li>鼎搜公益</li>
                        <li><input type="text"></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="big-img">
            <img src="./bigimg.png" alt="">
        </div>
        <div class="wyzr">
            <div class="zr">
                <p>我要转让</p>
                <p>WOYAOZHUANRANG</p>
            </div>
        </div>
        <div class="login-interface">
            <div class="input-content">
                <div class="big-click">
                    <div class="click">
                        <div>点击登录</div>
                        <div>点击注册</div>
                    </div>
                </div>
                <div class="uese-name">
                    <p>用户名：<input type="text"></p>

                </div>
                <div class="uese-password">
                    <p>密码：<input type="password"></p>

                </div>
                <div class="uese-code">
                    <p>验证码：<input type="text"></p>
                    <div class="yzm"><img src="./yzm.png" alt=""></div>
                    <p class="codea">看不清？ </p>

                </div>
                <div class="term-of-validity">
                    <p>有效期：</p>
                    <input name="sex" type="radio">一个月 <input name="sex" type="radio">一周 <input name="sex" type="radio">一天 <input name="sex" type="radio">及时


                </div>
                <div class="register">
                    <div class="register-content">
                        <p>登录</p>
                    </div>
                    <p class="register-second">忘记密码?</p>
                </div>











            </div>
            <div class="picture-puzzle"><img src="./dswptq.png" alt=""></div>
        </div>
        <div class="xian"></div>
        <div class="bottom">
            <div class="daohang">
                <ul>
                    <li>简 介</li>
                    <li>鼎搜网简介</li>
                    <li>鼎搜服务</li>
                    <li>会员身份实名认证</li>
                </ul>
                <ul>
                    <li>帮 助</li>
                    <li>用户注册</li>
                    <li>关于鼎搜</li>
                    <li>在线咨询</li>
                </ul>
                <ul>
                    <li>共 赢</li>
                    <li>网站合作</li>
                    <li>用户协议</li>
                    <li>会员身份实名认证</li>
                </ul>
                <ul>
                    <li>导 航</li>
                    <li>地图首页</li>
                    <li>职能分类</li>
                    <li>企业名录</li>
                </ul>
            </div>
            <div class="daohang-img"><img src="./daohangimg.png" alt=""></div>
        </div>
        <div class="bottom2">
            <p>Copyright &copy;2015 鼎搜网(www.dinsoo.com) 版权所有</p>
        </div>
    </div>
</body>

</html>